<template>
  <div class="about">
    <div class="list_head">
    <van-icon name="arrow-left" size="1.5rem"/>
    <van-search placeholder="请输入搜索关键词" v-model="active" />
    <!-- <van-icon name="cart-o" size="1.5rem"/> -->
    </div>
    <div class='list_screen'>
      <ul>
        <li>综合</li>
        <li>销量</li>
        <li>价格</li>
        <li>促销</li>
        <li>筛选</li>
      </ul>
    </div>
  <van-tabs v-model="title1" title-active-color="green" color="green" @click="listonChange">
  <van-tab title="牛肉"><van-card
      v-for="product in products"
      :num='99999'
      :price="product.price"
      :title="product.name"
      :thumb="serverUrl+product.coverImg"
      :key="product._id"
      :thumb-link="`#/list/${product._id}`"
    >
      <div slot="footer">
        <van-button size="mini" @click="btnmini(product._id)" class="btn_C"><van-icon class="btn-cart" name="cart" /></van-button>

      </div>
  </van-card>
    <van-button size="large" @click="upload">加载更多</van-button></van-tab>
  <van-tab title="羊肉">内容 2</van-tab>
  <van-tab title="家禽">内容 3</van-tab>
  <van-tab title="虾">内容 4</van-tab>
  <van-tab title="鱼">内容 5</van-tab>
  <van-tab title="蟹贝参鲍">内容 6</van-tab>
  <van-tab title="加工类">内容 7</van-tab>
  <van-tab title="大闸蟹">内容 8</van-tab>
  <van-tab title="查干湖鱼">内容 9</van-tab>
</van-tabs>


  </div>

</template>


<script>
import { serverUrl } from '../utils/config'
import { get } from "axios";
import { getProducts } from '../servers/products.js'
import { addToShopCart } from '../servers/user.js'
import { isLogin } from '../utils/auth'
export default {
  data () {
    return {
     products: [],
     page: 1,
     pageCount: 1,
     serverUrl,
     active:"",
     title1:"",


    }
  },
  created () {
   this.loadData()
   this.active="牛肉"
  },
  methods: {
    listonChange(key,title){
      this.activeKey = key;
      this.active=title;
      //this.active=key;
      //this.active=this.title;
      //console.log(title)
      //console.log(this.activeKey)

    },
    upload(){
      this.page+=1
      this.loadData()
    },
    btnmini(id){
      alert(id)
      if(isLogin()==true){
        this.$eventBus.$emit('addToShopCartend')
      }else{
        return this.$router.push({
          name:'login'
        }),
        this.$eventBus.$emit('nanto','usercent')
      }
      addToShopCart(id,1);

    },
    loadData(){
      getProducts({page:this.page})
      // get(`${serverUrl}/api/v1/products?page=${this.page}`)
      .then(res=>{
        this.products = this.products.concat(res.data.products)
        this.pageCount = res.data.pages
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.about{
   padding-bottom: 60px;

}
.list_head{
  display: flex;
  justify-content: space-around;
}
.van-icon{
  line-height:3.5rem;
}
.van-search{
  padding: 0
}
.list_screen ul{
  display: flex;
  justify-content: space-around
}

/* van card 排版 格式 */
.van-card__bottom{
  margin-top: 3rem
}
.btn_C{
  border: 0;
  background-color: #fafafa
}
.btn-cart{
  color: green;
  font-size: 1.6rem;
  height: 1.2rem;
  line-height: 1.2rem
}
</style>
